<script setup>
import { reactive,ref } from 'vue';

let divwidth=ref(400)
let divbgcolor=ref('beige')
let isActive=ref(true)
let obj1=reactive({width:'300px',border:'1px solid red',backgroundColor:'beige',margin:'10px 0px'})
let obj2=reactive({width:'300px',border:'1px solid green',backgroundColor:'beige',margin:'10px 0px'})

let styleobj1=reactive({width:'300px',border:'1px solid red',backgroundColor:'beige',margin:'10px 0px'})
let styleobj2=reactive({fontSize:'30px'})
</script>
<template>
<h1>样式绑定-style属性绑定-Demo9</h1>
<div style="width: 300px;border: 1px solid red;background-color: beige;">
    style属性设置css样式
</div>
<p>
    1.将style属性绑定为对象<br/>
    2.将style属性绑定为数组
</p>
<div :style="{width:'300px',border:'1px solid red','background-color':'beige'}">
    1.将style属性绑定为对象
    注意：如果属性名称中有短横线的名称，<br/>
    （1）该名称需要引号括起来<br/>
    （2）改名称将短横线、右边相邻的小写字母替换成大写-（驼峰式）
</div>

<div :style="{width:'300px',border:'1px solid red',backgroundColor:'beige'}">
    1.将style属性绑定为对象
    注意：如果属性名称中有短横线的名称，<br/>
    （1）该名称需要引号括起来<br/>
    （2）改名称将短横线、右边相邻的小写字母替换成大写-（驼峰式）
</div>

<div :style="obj1">
    使用对象变量的方式赋值
</div>

<div :style="{width:divwidth+'px',border:'1px solid red',backgroundColor:divbgcolor,margin:'10px 0px'}">
    使用变量的方式，赋值div的宽度，赋值背景的颜色
</div>

<div :style="{width:'300px',height:'100px',backgroundColor:isActive?'red':'green'}">
    使用三元运算符{{isActive}}
    <button @click="isActive=!isActive">取反</button>
</div>

<div :style="isActive?obj1:obj2">
    使用三元运算符{{isActive}}
    <button @click="isActive=!isActive">取反</button>
</div>

<div :style="[styleobj1,styleobj2]">
    2.将style属性绑定为数组 数组的值为对象变量
</div>

<div :style="[{width:'300px',border:'1px solid red',backgroundColor:'beige',margin:'10px 0px'},styleobj2]">
    2.将style属性绑定为数组 数组的值为对象变量
</div>

<div :style="[styleobj1,isActive?styleobj2:null]">
    使用三元运算符绑定样式
    {{isActive}}
    <button @click="isActive=!isActive">取反</button>
</div>
</template>
<style scoped>
</style>